<template >    
    <div class="nav-bar-comp">
        <div class="logo-block">LOGO</div>

        <div class="link-btns">
            <div class="link-btn" v-for="(item,index) in menus" :key="index"
            :class="[getMenuActiveClass(item)]"
            @click="gotoPage(item)">{{item.name}}</div>
        </div>
    </div>
</template>

<script>
export default {
    components: {
        
    },
    data(){
        return {
            menus: [
                {
                    name: '首页',
                    path: '/home',
                },
                {
                    name: '功能页面',
                    path: '/index/TodoList/1-1-1',
                    activeMenuReg: /^\/index\/TodoList/
                },
                {
                    name: '登录页面',
                    path: '/login',
                },
            ]
        }
    },
    mounted(){

    },
    computed:{
        currentRoutePath(){
            return this.$route.path
        },
    },
    methods:{
        gotoPage(menu){
            this.$router.push(menu.path)
        },
        getMenuActiveClass(menu){
            if(menu.activeMenuReg){
                return menu.activeMenuReg.test(this.currentRoutePath)?'active': ''
            }else{
                return menu.path===this.currentRoutePath?'active':''
            }

        }
    }
}
</script>

<style lang="scss">
.nav-bar-comp{
    
}
</style>

<style lang="scss" scoped>
.nav-bar-comp{
    height: 60px;
    background-color: #324057;
    color: #C6CAD0;
    display: flex;
    align-items: center;
    .logo-block{
        font-size: 40px;
        margin-left: 70px;
        margin-right: 82px;    
    }
    .link-btns{
        display: flex;
        .link-btn{
            height: 60px;
            line-height: 60px;
            margin-right: 20px;
            font-size: 20px;
            cursor: pointer;
            user-select: none;
            &.active,&:hover{
                border-bottom: 6px solid #C6CAD0;
            }
        }
    }
}
</style>
